<template>
  <div class="cxx-page">
    <el-form :inline="true" :model="formInline"
      style="display: flex;align-items: flex-end;justify-content: space-between;">
      <el-row style="width: 50%;display: flex;align-items: center;">

        <el-form-item label="优惠券编码" class="cxx-form-item">
          <el-input v-model="formInline.couponSeq" placeholder="优惠券编号">
          </el-input>
        </el-form-item>

        <el-form-item label="优惠券名称" class="cxx-form-item">
          <el-input v-model="formInline.couponName" placeholder="优惠券名称">
          </el-input>
        </el-form-item>

        <el-form-item label="活动名称" class="cxx-form-item">
          <el-input v-model="formInline.activityName" placeholder="活动名称">
          </el-input>
        </el-form-item>

      </el-row>
      <el-col :span="8">
        <el-form-item style="display: flex;align-items: flex-end;justify-content: flex-end;">
          <el-button @click="exportToo" style="margin-top: 0px;" size="mini" type="success" icon="el-icon-s-data"
            :loading="exportLoading">导出</el-button>
          <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">查询</el-button>
          <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete"> 清空 </el-button>
        </el-form-item>
      </el-col>
    </el-form>

    <el-table :data="tableData" v-loading="loading" border height="400" style="width: 100%;height:500px"
      :header-cell-style="{background:'#ebecf0',color:'#606266'}">
      <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
      <el-table-column prop="couponSeq" label="优惠券编码" header-align="center" width="150"></el-table-column>
      <el-table-column prop="couponName" label="优惠券名称" header-align="center" width="220"></el-table-column>
      <el-table-column prop="couponMoney" align="right" label="优惠券面值(元)" header-align="center" width="160">
      </el-table-column>
      <el-table-column prop="joinStoreNum" align="right" label="参与门店数量" header-align="center" width="160">
        <template slot-scope="scope">
          {{scope.row.joinStoreNum||0}}
        </template>
      </el-table-column>
      <el-table-column prop="activityName" label="活动名称" min-width="220" header-align="center"></el-table-column>
      <el-table-column prop="couponConvertNum" align="right" label="已兑换数量" header-align="center" width="160">
        <template slot-scope="scope">
          {{scope.row.couponConvertNum||0}}
        </template>
      </el-table-column>
      <el-table-column prop="couponUseNum" align="right" label="已使用数量" header-align="center" width="160">
        <template slot-scope="scope">
          {{scope.row.couponUseNum||0}}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180" align="center" header-align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="toLook(scope.row, true)">门店详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="cxx-block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]" :current-page="listQuery.current" :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

  </div>
</template>

<script>
  import {
    queryActivityStoreList,
    queryActivityStoreListExcel
  } from "@/api/goujiuCouponRecord";

  export default {
    data() {
      return {
        formInline: {
          couponSeq: undefined, //卡券编码
          couponName: undefined, //卡券名称
          activityName: undefined, //活动名称
        },
        listQuery: {
          current: 1,
          size: 10
        },
        total: 0,
        loading: false,
        tableData: null,
        tableDataExcel: null,
        exportLoading: false
      }
    },
    mounted() {
      this.getPageList();
    },
    methods: {
      getPageList() {
        let data = {
          size: this.listQuery.size,
          current: this.listQuery.current,
          condition: {
            couponSeq: this.formInline.couponSeq,
            couponName: this.formInline.couponName,
            activityName: this.formInline.activityName
          },
          ascs: [],
          descs: []
        };
        queryActivityStoreList(data).then(res => {
          this.loading = false;
          this.tableData = res.records;
          this.total = res.total;
        });
      },
      handleSizeChange(val) {
        this.listQuery.size = val;
        this.getPageList();
      },
      handleCurrentChange(val) {
        this.listQuery.current = val;
        this.getPageList();
      },
      search() {
        this.listQuery.current = 1;
        this.getPageList();
      },
      kong() {
        this.formInline = {
          couponSeq: undefined, //卡券编码
          couponName: undefined, //卡券名称
          activityName: undefined, //活动名称
        }
      },
      exportToo() {
        this.exportLoading = true;
        let data = {
          size: this.total,
          current: 1,
          condition: {
            couponSeq: this.formInline.couponSeq,
            couponName: this.formInline.couponName,
            activityName: this.formInline.activityName
          }
        };

        queryActivityStoreListExcel(data).then(res => {
          const link = document.createElement('a');
          let blob = new Blob([res], {
            type: 'application/vnd.ms-excel'
          });
          link.style.display = 'none';
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download = '购酒券发行记录表.xlsx';
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
          this.exportLoading = false;

        });
      },
      toLook(e) {
        this.$router.push({
          name: "goujiuCouponUseList",
          params: {
            couponInfo: e
          }
        });
      }
    }
  }
</script>

<style scoped>
  .cxx-page {
    padding: 10px 40px;
    box-sizing: border-box;
    height: calc(100vh - 200px);
  }

  .cxx-form-item {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin-right: 20px;
  }

  .cxx-block {
    margin-top: 10px;
  }
</style>
